<template>
<view class="collect">
	<view class="vis" v-if="list.length">
		<view>共计{{ list.length }}条记录</view>
		<image class="edit" @click="isEdit = !isEdit" :src="isEdit ? '/static/edit_act.png' : '/static/edit.png'"></image>
	</view>
	<view class="list" v-if="!noData && list.length">
		<scroll-view scroll-y class="srx">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view>
					<view :class="['delete', {act: isEdit}]" @click="delfoot(item)">
						<image src="/static/delete.png"></image>
					</view>
					<navigator :url="'/pages/orders/productinfo?pid='+item.id" hover-class="none" class="image">
						<image :src="item.default_imgurl"></image>
					</navigator>
					<view class="dsc">
						<view class="info">
							<view class="title">
								{{ item.name }} {{ item.remarks }}
							</view>
							<view class="price">
								<text class="n"><text>&yen;</text>{{ item.now_price }}</text>
								<text class="o">&yen;{{ item.orgin_price }}</text>
							</view>
							<view class="btn">
								<view><navigator hover-class="none" :url="'/pages/search/productlist?id='+item.type_id || ''">查看相似</navigator></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	<empty-data v-else>{{ text }}</empty-data>
	
</view>
</template>

<script>
	export default {
		name: 'comtemp',
		props: {
			pushList: Function,
			delItem: Function,
			type: Number,
			text: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isEdit: false,
				list: [],
				noData: false
			};
		},
		watch: {
			list: function (val,oldVal) {
				if (!val.length) this.noData = true
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList () {
				uni.showLoading()
				this.pushList().then(res => {
					uni.hideLoading()
					if (res.value.length === undefined) {
						for(let i in res.value) {
							this.list.push(res.value[i])
						}
						this.list = this.list.filter(item => item.name)
						return
					}
					if (res.value.length) {
						this.list = res.value.filter(item => item.name)
					} else {
						this.noData = true
					}
				})
			},
			delfoot (item) {
				uni.showModal({
					title: '',
					content: '确认删除吗?',
					success: e => {
						if(e.confirm) {
							let data
							if (this.type) {
								data = { id: item.visit_id }
								this.list = this.list.filter(item => item.visit_id !== data.id)								
							} else {
								data = {
									product_id: item.id,
									is_collet: 0
								}
								this.list = this.list.filter(rst => rst.id !== item.id)								
							}
							this.delItem(data).then(res => { console.log(res) })							
						}
					}
				})
			}
		}		
	}
</script>

<style lang="less" scoped>
@import '../../common/styles/variables.less'; 
.collect {
	height: 100%;
	display: flex;
	flex-flow: column;
	flex-direction: column;
	.vis {
		height: @height;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background:white;
		padding: 0 15px;
		font-size: 24upx;
		.border-bottom;
		.edit {
			width: 36upx;
			height: 36upx;
		}
	}
	.list{
		flex: 1;
		background-color:#efefef;
		overflow: hidden;
		.srx {
			height: 100%;
			box-sizing: border-box;
			.item {
				&:first-of-type {
					padding-top: 15upx; 
				}
				&:last-of-type {
					//padding-bottom: 15upx;
					& > view {
						margin-bottom: 0
					}
				}
				&:not(:last-of-type) {
					.border-bottom(15upx);
				}
				& > view {
					background-color:white;
					padding: 20upx;
					display: flex;
					position: relative;
					.delete {
						position: absolute;
						right: 15upx;
						top: 15upx;
						background-color:#f44336;
						transition: transform .2s ease-in-out;
						transform: scale(0);
						border-radius: 10upx;
						overflow: hidden;
						& > image { width:40upx;height: 40upx;display: block; padding: 10upx; }
						&.act {
							transform: scale(1);
						}
					}
					.image {
						width: 150upx;
						height: 150upx;
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center center;
						margin-right: 15upx;
						& > image {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
					.dsc {
						flex: 1;
						display: flex;
						align-items: center;
						.info {
							font-size: @title;
							.title {
								.twoLine(2);
								line-height: 1.3;
							}
							.price {
								margin: 10upx 0;
								.n {
									color:@red;
									margin-right: 15upx;
									font-size:@title;
									font-weight: bold;
									text { font-size:@minSize;padding-right: 6upx}
								}
								.o {
									font-size: @minSize;
									color:@gray;
									text-decoration: line-through;
								}
							}
							.btn {
								display: flex;
								& > view {
									background-color:@red;
									color:white;
									border-radius: 10upx;
									font-size: @minSize;
									padding: 6upx 30upx;
									.arrowRight(white, 40upx,15upx);
								}
							}
						}
					}
				}
			}
		}
	}
	.no-data {
		position: relative;
	}
}

</style>
